<template>
  <div id="root" v-if="!loading">
    <div id="job-container">
      <el-card>
        <div id="title">
          <div style="font-size: 1.7em">{{ job.name }}</div>
          <div style="margin-top: 5px">{{ company.name }}</div>
        </div>
        <!-- top总 -->
        <div class="title-mid">
          <!-- 左 -->
          <div class="title-left">
            <div>
              <span style="font-size: 30px; font-weight: bold">{{
                job.salary
              }}</span>
            </div>
            <div class="el-icon-location-information">
              <span>{{ job.address }}</span>
            </div>
            <div>
              <div>
                {{ job.education }}
                <span>丨{{ job.experience }}</span>
                <span>丨语言不限</span>
                <span>丨年龄不限</span>
              </div>
            </div>
          </div>
          <!-- 右 -->
          <div class="title-right">
            <el-button type="warning" @click="send_to">应聘职位</el-button>
          </div>
        </div>
        <!-- mid总 -->
        <div id="content">
          <div style="border-left: 3px solid #3d9ccc; padding-left: 10px">
            职位描述
          </div>
          <div style="white-space: pre-line; font-size: 16px; padding: 15px">
            {{ job.description }}
          </div>
        </div>
        <!-- bottom -->

        <div id="bottom2">
          <div style="border-left: 3px solid #3d9ccc; padding-left: 10px">
            企业介绍
          </div>
          <div style="white-space: pre-line; font-size: 16px; padding: 15px">
            {{ company.description }}
          </div>
        </div>
      </el-card>
    </div>
    <div id="company-container">
      <el-card>
        <div style="text-align: center">
          <img :src="company.img" height="120" width="120" />
          <div style="font-weight: bold; font-size: 18px">
            {{ company.fullName }}
          </div>
        </div>
        <div class="company-title">
          <div>融资：{{ company.type }}</div>
          <div>公司规模：{{ company.member }}</div>
          <div>地址：{{ company.address }}</div>
          <div>注册时间：{{ company.establishedTime }}</div>
          <div>注册资本：{{ company.registerdCapital }}</div>
          <div style="white-space: pre-line">
            经营范围：{{ company.businessScope }}
          </div>
        </div>
        <div
          style="
            border-left: 3px solid #3d9ccc;
            padding-left: 10px;
            margin-top: 20px;
          "
        >
          职位发布者
        </div>
        <div style="margin-top: 20px; text-align: center">
          <div>
            <img
              src="@/assets/img/avatar.png"
              width="80"
              style="border-radius: 40px"
            />
          </div>
          <div style="margin: 10px 0; font-size: 1.3em">{{ employer.name }}</div>
          <div style="margin: 10px 0; color: gray">职位：{{ employer.position }}</div>
          <div>
            <el-button type="primary" size="small" @click="showChatDialog">立即沟通</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import mitter from '../../../plugins/mitter'
export default {

  data() {
    return {
      job: null,
      employer: null,
      company: null,
      loading: true,
      sender: "",
    };
  },
  created() {
    this.loading = true;
    this.axios.get("/job/find_job?id=" + this.$route.params.id).then((res) => {
      this.job = res.data.data.job;
      this.employer = res.data.data.employer;
      this.company = res.data.data.company;
      
      this.loading = false;
    });
  },
  methods: {
    send_to() {
      const sender = sessionStorage.getItem("username");
      // this.axios.post("/job/send-resume",)
      this.axios({
        method: "post",
        url: "/job/send-resume",
        data: {
          username: sender,
          jobId: this.job.id,
        },
      }).then(res => {
        if(res.data.code == 200){
          ElMessage.success(res.data.data)
        }

      });
    },
    showChatDialog() {
      const payload = {
        username: this.employer.username,
        nickname: this.employer.name,
        avatarUrl: this.employer.avatarUrl
      }
      mitter.emit('showChatDialog', payload)
    }
  },
};
</script>

<style scoped>
#root {
  width: 1000px;
  margin: 100px auto;
  display: flex;
}
#job-container {
  width: 65%;
  margin-right: 30px;
}
#company-container {
  width: 35%;
}
.space {
  margin: 10px 0px;
}
#title {
  background-color: #3d9ccc;
  padding: 10px;
  color: white;
  border-radius: 10px;
  margin: 0 -10px;
}
.title-left {
  display: flex;
  flex-direction: column;
  height: 100px;
  justify-content: space-between;
}
.title-mid {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px;
  border-bottom: 1px dotted gray;
}
.company-title {
  margin-top: 10px;
  padding: 10px;
  color: gray;
  font-size: 15px;
  border-bottom: 1px dotted gray;
}
.company-title > div {
  margin-top: 5px;
}
#content {
  margin-top: 20px;
  padding: 20px 10px;
  border-bottom: 1px dotted gray;
}
#bottom2 {
  margin-top: 20px;
  padding: 20px 10px;
}
</style>